import React, { Component, PropTypes } from 'react';
import { Modal, Button, Spin, Col, Icon, Divider, message, Row } from 'antd'
import { messages, queryCurrencyPrecision } from "share/common";
import moment from "moment/moment";
import borrowService from "../borrow-and-return.service";

class ViewHistory extends Component{
  state = {
    historyLoading: false,
    historyInfo: [],
    printLoading: false
  };

  typeMap = new Map([
    ['0',messages('loan-billing.key4')/*现金还款*/],
    ['1',messages('loan-billing.key5')/*转账还款*/],
    ['2',messages('loan-billing.key6')/*报销单还款*/],
    ['3',messages('loan-billing.key122')/*信用核销*/],
    ['4',messages('loan-billing.key203')/*转永久还款*/]
  ]);

  statusMap = new Map([
    ['1001',<span style={{color: '#fc520e'}}>{messages('loan-billing.key123')/*进行中*/}</span>],
    ['1002',<span style={{color: '#49c340'}}>{messages('loan-billing.key9')/*已还款*/}</span>],
    ['1011',<span style={{color: '#49c340'}}>{messages('loan-billing.key124')/*已完成*/}</span>]
  ]);

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible) {
      this.getHistoryInfo()
    }
  }

  getHistoryInfo = () => {
    const { id } = this.props;
    this.setState({historyLoading: true});
    borrowService.getLoanHistory(id).then(res => {
      let temp = [];
      res.data.map(item => {
        (item.status === '1001' || item.status === '1002' || item.status === '1011') && temp.push(item);
      });
      this.setState({historyLoading: false, historyInfo: temp});
    }).catch(e => {
      this.setState({historyLoading: false});
      message.error(e.response.data.message);
    })
  };

  handleViewRefund = item => {
    if(item.type == 4) return //如果是转永久就取消详情查看事件
    const { handleViewRefund } = this.props;
    handleViewRefund(item);
  };

  handleCancel = () => {
    const { close } = this.props;
    close();
  };

  handlePrint = (e, item) => {
    e.stopPropagation();
    this.setState({ printLoading: true });
    borrowService.printRepayment(item.repaymentOid).then(res => {
      this.setState({ printLoading: false });
      window.open(res.data.link, '_blank')
    }).catch(e => {
      this.setState({ printLoading: false });
      message.error(e.response.data.message);
    });
  };

  render(){
    const { historyLoading, historyInfo, printLoading } = this.state;
    const { visible } = this.props;
    return(
      <Modal
        visible={visible}
        width={700}
        title={messages('loan-billing.key121')/*还款历史*/}
        footer={
          <Button onClick={this.handleCancel} type={'default'}>{messages('common.cancel')}</Button>
        }
        onCancel={this.handleCancel}
      >
        <Spin spinning={historyLoading}>
          <div style={{overflowY: 'auto', height: '300px'}}>
            {
              historyInfo.length > 0 ?
                historyInfo.map(item => {
                  return <div onClick={() => this.handleViewRefund(item)}>
                    <div style={{padding: '5px', fontSize: '16px'}}>
                      <Row>
                        <Col span={8}>{item.businessCode}</Col>
                        <Col span={6} offset={7}>{this.statusMap.get(item.status)}</Col>
                        <Col span={3}>
                          {
                            item.type !== '2' && item.type !== '3' && item.type !== '4' && (
                              <Spin spinning={printLoading}>
                                <span style={{ fontSize: '16px', color: '#2B78FF' }} onClick={e => this.handlePrint(e, item)}>
                                  <Icon type="printer"/>{messages('common.print')/*打印*/}
                                </span>
                              </Spin>
                            )
                          }
                        </Col>
                        <Col span={8}>{moment(item.createDate).format('YYYY-MM-DD')}</Col>
                        <Col span={7}>{this.typeMap.get(item.type)}</Col>
                        <Col span={6}>{`${item.curreny} ${this.filterMoney(item.actRepayAmount, queryCurrencyPrecision(item.curreny), true)}`}</Col>
                      </Row>
                    </div>
                    <Divider style={{color: '#e8e8e8'}}/>
                  </div>
                }) : <div style={{textAlign: 'center', padding: '15px 0px'}}>{messages('loan-billing.key125')/*暂无还款记录～*/}</div>
            }
          </div>
        </Spin>
      </Modal>
    )
  }

  static propTypes = {
    visible: PropTypes.bool,
    id: PropTypes.string,
    handleViewRefund: PropTypes.func,
    close: PropTypes.func
  }
}

export default ViewHistory;
